/**
@class RefApp.views.cartList
@extends Ext.form.Panel
The panel containing a List and a Toolbar Panel. Toolbar panel, apart of showing title is responsible for showing the total cost of
order. It also contain button which takes user to FormPanel and Button "wyczyść", that can clear all products in cart by on click.
List only shows to user products in special way that is specified in cardCard.js in Ext.Templates. It also let user to change or delete
products from cart by taping the right product. Every action connected with clicking or taping is solved by tap function in listeners.
Data are stored in a cartStore, and to change or delete date, we use several of action from sencha store. It getAt(variable), 
removeAt(variable), add(set of viariables in special format which is specified into a catrItem). getAt function provides us to get 
the information about products by giving the index of it. removeAt function let us remove the item by giving the index of it. And add
function gives us chance to add new product to cartStore. This part of application also containt two popup Panels, it let user to change
the size of products, or delete it from cart. It shows after taping items, and button on a first popup Panel. 
*/
RefApp.views.CartList = Ext.extend(Ext.Panel, {	
	id : 'cartList',
	dockedItems: [{
    	xtype: "toolbar",
        title: "Koszyk",
        id: 'cartToolbar',
        items : [
                 { 
                	 xtype : "button",
                	 id : 'clearButton',
                	 ui : "decline",
                	 text : "Wyczyść",
                	 listeners : { 
                		 tap : function(){
                	 		Ext.dispatch({
                	 			controller: 'Cart',
                	 			action: 'clearCart'
                	 		});
                			RefApp.views.cartCard.doLayout(); 
                		 }           		 
                	 }
                  },
                  {
                	  xtype : "spacer"
                  },
                  {
                	  xtype : "button",
                	  ui : "confirm",
                	  text : "Zamów",
                	  id : 'orderButton',
                	  //disabled: true,
                	  listeners : {
                		  tap : function(){
                	  			Ext.dispatch({
                	  				controller: 'Cart',
                	  				action: 'showForm'
                	  			});
                		  }
                	  }
                  }
                  
        ]
    }],
    items:
    [
    	new Ext.List({
    		fullscreen : true,
    		scroll : "vertical",
    		listeners : {
    		itemtap : function(view, index){
    			var myData = RefApp.stores.cartStore.getAt(index);
                    popup = new Ext.Panel({
                        floating: true,
                        centered: true,
                        styleHtmlContent: true,
                        dockedItems: [{
                            dock: 'top',
                            xtype: 'toolbar',
                            title: 'Możliwe zmiany:'
                        }],
                        layout :{
                        	type : "hbox"
                        },
                        items : [
								{
									 xtype : "button",
									 text : "Anuluj",
									 ui : "decline",
									 listeners : {
										 tap : function (){
											 popup.hide();
										 }
									 }
								},
                                 
                                 {
                                	 xtype : "button",
                                	 text : "Zmień rozmiar",
                                	 ui : "confirm",
                                	 listeners : {
                                		 tap :function(){
                                			 popup.hide();
                                			 var buttons_for_change = [];
                                			 for(var i = 0; i < myData.data.possibilities.length; i++){
                                				 buttons_for_change[i] = {
                                						 xtype : "button",
                                						 text : myData.data.possibilities[i] + (isInt(myData.data.possibilities[i]) ? ' cm' : ''),
                                				 		 ui : "confirm",
                                				 		 listeners : {
                                				 			 tap : function(){
                                				 				 RefApp.stores.cartStore.removeAt(index);
                                				 				 myData.data.size = this.text;
                                				 				 RefApp.stores.cartStore.add(myData.data);
                                				 				 var temp;
                                				 				 var counter = RefApp.stores.cartStore.data.length - index -1;
                                				 				 while(counter--){
                                				 					 temp = RefApp.stores.cartStore.getAt(index);
                                				 					 RefApp.stores.cartStore.removeAt(index);
                                				 					 RefApp.stores.cartStore.add(temp);
                                				 				 }
                                				 				 popup_change.hide();
                                				 				 RefApp.views.cartCard.doLayout();
                                				 			 }
                                				 		 }
                                				 }
                                			 };
                                			 popup_change = new Ext.Panel({
                                				 floating: true,
                                                 centered: true,
                                                 styleHtmlContent: true,
                                                 dockedItems: [{
                                                     dock: 'top',
                                                     xtype: 'toolbar',
                                                     title: 'Możliwe rozmiary:'
                                                 }],
                                                 layout : { type : "hbox"},
                                                 items : [buttons_for_change]
                                			 });
                                			 popup_change.show('pop');
                                		 }
                                	 }
                                 } ,
                                 {
                                	 xtype : "button",
                                	 text : "Usuń",
                                	 ui : "decline",
                                	 listeners : {
                                		 tap : function(){
                 							 Ext.dispatch({
                             	  				controller: 'Cart',
                             	  				action: 'deleteItem',
                             	  				item: index
                             	  			 });
                 							 RefApp.views.cartCard.doLayout();
                 							 popup.hide();
                                		 }
                                	 }
                                 }
                        ]
                    
                    });
                    popup.show('pop');
    		}},
    		store: RefApp.stores.cartStore,
    		emptyText: 'Koszyk jest pusty',
    		deferEmptyText: false,
    		itemTpl : tpl
    	})
   ]
});
Ext.reg('cartList', RefApp.views.CartList);